<template>
    <div class="container">


        <div class="am-cf am-padding am-padding-bottom-0">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">友情链接</strong> /
                <small>Article List</small>
            </div>
        </div>

        <hr>
        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <router-link :to="{name:'create'}" type="button" class="am-btn am-btn-default">
                            <span class="am-icon-plus">新增</span>
                        </router-link>
                        <button type="button" class="am-btn am-btn-default" @click="del()"><span
                                class="am-icon-trash-o"></span> 删除
                        </button>
                    </div>
                </div>
            </div>

            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group am-input-group-sm">
                    <input type="text" class="am-form-field" v-model="keywords">
                    <span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button"  @click="handerSearch">搜索</button>
          </span>
                </div>
            </div>
        </div>

        <template>
            <el-table :data="links" style="width: 100%" @selection-change="linkChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="date" label="编号" width="120">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="链接名称" width="120">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="链接地址">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.address}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="链接描述">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.description}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="is_show" label="是否显示" width="80">
                    <template slot-scope="scope">
                        <template v-if="scope.row.is_show"><i class="el-icon-success"></i></template>
                        <template v-else><i class="el-icon-error"></i></template>
                    </template>
                </el-table-column>
                <el-table-column prop="sort_order" label="排序" width="120">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.sort_order}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-left: 500px;margin-top: 50px;">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="page.total"
                        :page-size="page.size"
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage">
                </el-pagination>
            </div>



            <!-- Form -->

            <el-dialog title="友情链接" :visible.sync="dialogFormVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item label="链接名称" prop="name" :label-width="formLabelWidth">
                        <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="链接地址" prop="address" :label-width="formLabelWidth">
                        <el-input v-model="ruleForm.address" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort_order" :label-width="formLabelWidth">
                        <el-input v-model.number="ruleForm.sort_order" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示" prop="is_show" :label-width="formLabelWidth">
                        <el-radio-group v-model="ruleForm.is_show">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="链接描述" prop="description" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="ruleForm.description"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                    <!--<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
                </div>
            </el-dialog>


        </template>
        <footer class="admin-content-footer" style="margin-top: 60px;">
            <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
        </footer>
    </div>


</template>
<script>
    export default {
        data() {
            return {
                keywords: '',
                links: [],
                page: {
                    total: 0,
                    size: 0,
                    currentPage: 1,
                    num: 1
                },
                multipleSelection: [],


                dialogFormVisible: false,
                ruleForm: {
                    name: '',
                    address: '',
                    sort_order: '',
                    is_show: '1',
                    description: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入链接名称', trigger: 'blur'},
                        {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请填写链接地址', trigger: 'blur'},
                        {type: 'url', message: '请填写正确链接地址', trigger: 'blur'}
                    ],
                    sort_order: [
                        {required: true, message: '请填写排序', trigger: 'blur'},
                        {type: 'number', message: '请填写数字排序', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '请填写描述', trigger: 'blur'}
                    ],
                },
                formLabelWidth: '120px'
            }
        },
        created() {
            this.init()
        },
        methods: {
            handerSearch() {
                this.init();
            },
            handleCurrentChange(val) {
                this.page.num = val;
                this.init()
            },
            init() {

                axios.get(`http://trade.dev/admin/crm/links?page=${this.page.num}
                &keywords=${this.keywords}`)
                    .then((response) => {
                        // console.log(response.data);
                        this.links = response.data.data
                        this.page.total = response.data.total
                        this.page.size = response.data.per_page
                    })
            },
            handleDelete(index, row) {
                // console.log(index,row)
                axios.delete(`http://trade.dev/admin/crm/links/${row.id}`)
                    .then((response) => {
                        this.init()
                    })
            },
            handleEdit(index, row) {
                // console.log(index,row)
                axios.get(`http://trade.dev/admin/crm/links/${row.id}/edit`)
                    .then((response) => {
                        // this.link = response.data
                        this.ruleForm = response.data;
                    })
                //显示弹窗
                this.dialogFormVisible = true;
            },
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // let id = link.id
                        // console.log(id);
                        this.dialogFormVisible = false;
                        axios.patch(`http://trade.dev/admin/crm/links/${this.ruleForm.id}`, this.ruleForm)
                            .then((response) => {
                                this.init()
                            })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            linkChange(link) {
                this.multipleSelection = link
                // console.log(this.link.length);
                // return;
            },
            del() {
                if (this.multipleSelection.length == 0) {
                    this.$message.error('你必须至少选择一条数据');
                }
                let ids = this.multipleSelection.map(item => item.id)//获取所有选中行的id组成的字符串，以逗号分隔
                // console.log(ids);
                // return;
                axios.post(`http://trade.dev/admin/crm/links/del`, {id: ids})
                    .then((response) => {
                        this.init()
                    })
            },
        }

    }
</script>
<style>
    .el-icon-success {
        color: #67C23A;
    }

    .el-icon-error {
        color: #F56C6C
    }

</style>
